<template>
  <div class="container view-container">
    <div class="leftContent">
      <div class="title">视频文件</div>
      <div class="screenList">
        <div v-for="(item, index) in videoFileList" :key="index">
          <div
            class="screenItem"
            :id="`screenItem_${index}`"
            :style="
              index === selectIndex
                ? { border: 'solid 2px rgb(255, 189, 91)' }
                : { border: 'solid 2px rgb(255, 255, 255)' }
            "
          >
            <video class="video-js" :id="`mes_${index}`"></video>
          </div>
          <div class="select-btn">
            <el-button class="button" @click="selectItem(index)">{{ `选择` }}</el-button>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="playSafeTime">{{ leftPalyBtnName }}</el-button>
      </div>
    </div>
    <div class="rightContent">
      <div class="title">视频标注</div>
      <div class="screen" id="screen">
        <video class="video-js" id="select"></video>
      </div>
      <div class="operator">
        <el-button class="button" @click="changePlayMode()">切换播放模式</el-button>
        <el-button class="button" :disabled="selectPlayer.videoInfo.playMode == 0" @click="selectItemGetCurFrame()">{{
          selectItemGetCurFrameName
        }}</el-button>
        <el-button class="button" :disabled="selectPlayer.videoInfo.playMode == 0" @click="selectItemNextFrame()"
          >下一帧</el-button
        >
        <el-button class="button" :disabled="selectPlayer.videoInfo.playMode == 0" @click="selectItemLastFrame()"
          >上一帧</el-button
        >
      </div>

      <div class="markLine">
        <div class="timeTitle">
          <div style="font-weight: 600">开始时间</div>
          &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div style="font-size: 18px; margin-left: 20%" v-if="selectPlayer.videoInfo.playMode == 1">
            {{
              `帧率：${selectPlayer.videoInfo.fps},总帧:${selectPlayer.videoInfo.totalFrame},当前帧：${selectPlayer.videoInfo.curFrmeCount}`
            }}
          </div>
        </div>
        <div class="timeLine">
          <div v-for="(item, index) in markInfoList" :key="index">
            <div class="item">
              <div class="time">{{ item.startTimeDec }}</div>
              <div class="line" v-if="index < markInfoList.length - 1"></div>
            </div>
          </div>
        </div>
        <div class="mark-info">
          <div v-for="(item, index) in markInfoList" :key="index" class="mark-item">
            <div class="content" @click.stop="playMark(index)">
              <el-tooltip :content="item.desc" placement="top" :enterable="false">
                <div class="type-label">{{ item.type }}</div>
              </el-tooltip>
            </div>
            <div class="icon">
              <div class="iconfont icon-close" @click.stop="closeContent(index)"></div>
            </div>
            <div class="icon-zw"></div>
          </div>
        </div>
        <div class="timeTitle"><div style="font-weight: 600; margin-top: 10px">结束时间</div></div>
        <div class="timeLine">
          <div v-for="(item, index) in markInfoList" :key="index">
            <div class="item">
              <div
                class="time"
                :style="
                  item.endTimeDec === '' ? { 'background-color': '#fff' } : { 'background-color': 'rgb(64, 158, 255)' }
                "
              >
                {{ item.endTimeDec }}
              </div>
              <div class="line" v-if="index < markInfoList.length - 1"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="btn"><el-button type="primary" @click="endMark">{{ bottomMarkName }}</el-button></div> -->
    </div>

    <el-dialog v-model="dialogVisible" :before-close="handleClose" append-to-body>
      <div class="dialogContent">
        <div class="title">
          <div class="item">通道：{{ markInfo.channel }}</div>
          <div class="item">时间：{{ markInfo.createTime }}</div>
        </div>
        <el-form
          class="form"
          ref="formRef"
          :model="markInfo"
          :rules="markInfo.rules"
          hide-required-asterisk
          label-position="top"
        >
          <el-form-item class="type" prop="type">
            <el-input v-model="markInfo.type" maxlength="10" placeholder="请输入标注分类标签"></el-input>
          </el-form-item>
          <el-form-item class="desc" prop="desc">
            <el-input
              v-model="markInfo.desc"
              type="textarea"
              input-style="min-height: 31px; height: 210px; margin-top:-20px"
              placeholder="请输入文本标注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submit(false)">取消</el-button>
          <el-button type="primary" @click="submit(true)">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, onActivated, nextTick, ref, unref, onDeactivated } from 'vue';
import { useRoute } from 'vue-router';
import videojs from 'video.js';
import { Events } from 'xgplayer';
import { dateFormat } from '@/utils/webVideoCtrl';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getRightMarkListByVideoId, deleteMark, addMarkItemInfo } from '@renderer/src/utils/ipc';
import { userSystemStore } from '@/store';
import dayjs from 'dayjs';

const systemStore = userSystemStore();

const router = useRoute();
const selectItemGetCurFrameName = ref('按帧播放');

const formRef = ref();

const leftPalyBtnName = ref('同时播放');
const bottomMarkName = ref('开始标注');

let rightMarkInfo = [
  {
    describe: '',
    end_time: 0,
    id: '1',
    label: '',
    start_time: 2.0,
    v_channel: 1,
    v_end_time: '',
    v_id: '1',
    v_start_time: '',
    create_time: '',
    type: 1,
  },
];

const videoFileList = reactive([
  {
    channel: 1,
    create_time: '',
    download_status: 0,
    end_time: '',
    file_size: '',
    id: '1',
    save_path: '',
    start_time: '',
    status: 0,
    video_duration: 90,
    video_name: '',
    videoInfo: {
      totalFrame: 0,
      fps: 0,
      playMode: 0,
      curFrmeCount: 0,
    },
    markInfoList: [
      {
        id: '1',
        startTime: 8,
        startTimeDec: 0,
        endTime: 9,
        endTimeDec: '',
        pid: '', //关联的视频id
        createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        type: '',
        channel: 0,
        desc: '',
        atype: 1,
      },
    ],
  },
]);

const selectIndex = ref(0);
let selectPlayer = reactive({
  channel: 1,
  create_time: '',
  download_status: 0,
  end_time: '',
  file_size: '',
  id: '1',
  save_path: '',
  start_time: '',
  status: 0,
  video_duration: 90,
  video_name: '',
  timer: 0,
  videoInfo: {
    totalFrame: 0,
    fps: 0,
    playMode: 0,
    curFrmeCount: 0,
  },
  markInfoList: [
    {
      id: '1',
      startTime: 8,
      startTimeDec: 0,
      endTime: 9,
      endTimeDec: 0,
      pid: '', //关联的视频id
      createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      type: '',
      channel: 0,
      desc: '',
    },
  ],
});

const markInfo = reactive({
  id: '1',
  startTime: 0,
  startTimeDec: 0,
  endTime: 0,
  endTimeDec: '',
  pid: '', //关联的视频id
  createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
  type: '',
  channel: 0,
  desc: '',
  atype: 1,
  rules: {
    type: { required: true, message: '请输入标注分类标签', tirgger: 'blur' },
  },
});

const markInfoList = reactive([
  {
    id: '1',
    startTime: 8,
    startTimeDec: 0,
    endTime: 9,
    endTimeDec: '',
    pid: '', //关联的视频id
    createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
    type: '',
    channel: 0,
    desc: '',
    atype: 1,
  },
]);

onDeactivated(() => {
  clearInterval(selectPlayer.timer);
});
const dialogVisible = ref(false);

//切换播放模式
const changePlayMode = async () => {
  if (selectPlayer.videoInfo.playMode == 0) {
    selectPlayer.videoInfo.playMode = 1;
    if (!selectPlayer.player.paused()) {
      selectPlayer.player.pause();
    }
    let currentTime = selectPlayer.player.currentTime();
    selectPlayer.videoInfo.curFrmeCount = Math.floor(currentTime * selectPlayer.videoInfo.fps);
  } else {
    if (selectItemGetCurFrameName.value == '暂停') {
      selectItemGetCurFrameName.value = '按帧播放';
    }
    clearInterval(selectPlayer.timer);
    selectPlayer.videoInfo.playMode = 0;
  }
};

//按帧播放
const selectItemGetCurFrame = () => {
  if (selectItemGetCurFrameName.value == '按帧播放') {
    selectItemGetCurFrameName.value = '暂停';
    let tims = 150000;
    let frm = tims / selectPlayer.videoInfo.fps;
    selectPlayer.timer = setInterval(() => {
      selectItemPlayNextFrame(1);
    }, frm);
  } else {
    selectItemGetCurFrameName.value = '按帧播放';
    clearInterval(selectPlayer.timer);
  }
};

const selectItemNextFrame = () => {
  selectItemPlayNextFrame(1);
};

const selectItemLastFrame = () => {
  selectItemPlayNextFrame(-1);
};

const selectItemPlayNextFrame = (index) => {
  selectPlayer.videoInfo.curFrmeCount = selectPlayer.videoInfo.curFrmeCount + index;
  if (selectPlayer.videoInfo.curFrmeCount > selectPlayer.videoInfo.totalFrame) {
    selectPlayer.videoInfo.curFrmeCount = 0;
  } else if (selectPlayer.videoInfo.curFrmeCount < 0) {
    selectPlayer.videoInfo.curFrmeCount = selectPlayer.videoInfo.totalFrame;
  }
  let nextFrameTime =
    (selectPlayer.videoInfo.curFrmeCount * selectPlayer.player.duration()) / selectPlayer.videoInfo.totalFrame;
  selectPlayer.player.currentTime(nextFrameTime);
};

const getVideoInfo = async (path) => {
  let result = {
    totalFrame: 0,
    fps: 0,
    playMode: 0,
    curFrmeCount: 0,
  };
  let videoInfo = await window.api.getVideoOrAudioMetaDataPromise(path);
  console.log(videoInfo);
  if (videoInfo.streams) {
    videoInfo.streams.forEach((item) => {
      if (item.codec_type == 'video') {
        let frameList = item.avg_frame_rate.split('/');
        result.fps = parseInt((frameList[0] / frameList[1]).toFixed(0));
        result.totalFrame = item.nb_frames;
      }
    });
  }
  result.playMode = 0; // 0 正常播放， 1 按帧播放
  result.curFrmeCount = 0;
  return result;
};

const creatDom = (fid, id) => {
  let chid = document.getElementById(id);
  if (chid) {
    return;
  }
  let newVideoDom = document.createElement('video');
  newVideoDom.id = id;
  newVideoDom.className = 'video-js';
  newVideoDom.style.cssText = 'width:100%;height:100%;';
  let fidDom = document.getElementById(fid);
  fidDom?.appendChild(newVideoDom);
};

onActivated(async () => {
  markInfoList.length = 0;
  selectItemGetCurFrameName.value = '按帧播放';
  let params = router.query.params?.toString();
  if (params != null) {
    let videoFileListQuery = JSON.parse(params);
    videoFileList.length = 0;
    videoFileList.push(...videoFileListQuery);
    await nextTick();
  }
  await nextTick();
  videoFileList.forEach(async (item, index) => {
    if (videojs.getPlayer(`mes_${index}`)) {
      videojs.getPlayer(`mes_${index}`)?.dispose();
      creatDom(`screenItem_${index}`, `mes_${index}`);
    }
    item.player = videojs(`mes_${index}`, {
      sources: [
        {
          src: `${item.save_path}\\${item.video_name}`,
        },
      ],
      loop: false,
      controls: true,
      autoplay: false,
    });

    let videoInfo = await getVideoInfo(`${item.save_path}\\${item.video_name}`);
    item.videoInfo = { ...videoInfo };

    //播放监听
    item.player.on(Events.PLAY, (item) => {
      let id = item.target.id?.replace('mes_', '');
      if (id == selectIndex.value) {
        if (selectPlayer.videoInfo.playMode == 0) {
          selectPlayer.player.pause();
        }
      }
    });
    if (index === 0) {
      selectIndex.value = index;
      if (videojs.getPlayer(`select`)) {
        videojs.getPlayer(`select`)?.dispose();
        creatDom('screen', 'select');
      }
      selectPlayer.player = videojs(`select`, {
        sources: [
          {
            src: `${item.save_path}\\${item.video_name}`,
          },
        ],
        loop: false,
        controls: true,
        autoplay: false,
      });
      selectPlayer.videoInfo = item.videoInfo;
      //右边播放器监听- 播放
      selectPlayer.player.on(Events.PLAY, () => {
        if (selectPlayer.videoInfo.playMode == 1) {
          selectPlayer.player.pause();
          ElMessage.error('按帧播放模式下，请先切换播放模式');
          return;
        }
        videoFileList[selectIndex.value].player.pause();
      });

      await getDetails(0);
    }
  });
});

//切换播放地址,正常播放
const selectItem = async (index) => {
  videoFileList[index].player.load();

  selectIndex.value = index;
  let item = videoFileList[index];
  changeSource(`${item.save_path}\\${item.video_name}`);
  //从数据库中获取标注信息列表
  await getDetails(index);
};

const handleClose = async () => {
  dialogVisible.value = false;
  bottomMarkName.value = '开始标注';
};

const submit = async (value) => {
  if (value) {
    let valid = true;
    try {
      await unref(formRef).validate();
    } catch (err) {
      console.log(err);
      valid = false;
      ElMessage.error('请输入标注分类标签');
    }
    if (!valid) return;

    //将数据添加到列表
    markInfoList.push({ ...markInfo });
    videoFileList[selectIndex.value].markInfoList = markInfoList;
    if (selectPlayer.videoInfo.playMode == 0) {
      selectPlayer.player.play();
    } else {
      selectItemGetCurFrame();
    }
  } else {
    bottomMarkName.value = '开始标注';
  }
  dialogVisible.value = false;
};

const changeSource = (newSource) => {
  selectPlayer.player.src({ src: newSource });
  selectPlayer.player.load();
};

//时间转成秒
const getTimeDesc1 = (item) => {
  const time1 = dayjs(item.v_start_time);
  const time2 = dayjs(item.start_time);
  const diff = time2.diff(time1, 'seconds');
  return diff;
};

const getDetails = async (index) => {
  let item = videoFileList[index];
  rightMarkInfo.length = 0;
  try {
    rightMarkInfo = await getRightMarkListByVideoId({ id: item.id });
    markInfoList.length = 0;
    if (rightMarkInfo.length <= 0) {
      return;
    }
    rightMarkInfo.forEach((item, index) => {
      let startTimeDec = getTimeDesc(item.start_time);
      if (item.type == 2) {
        startTimeDec = getTimeDesc1(item);
        item.start_time = startTimeDec;
      }
      let endTimeDec = getTimeDesc(item.end_time);
      markInfoList.push({
        id: item.id,
        startTime: item.start_time,
        startTimeDec: startTimeDec,
        endTime: item.end_time,
        endTimeDec: endTimeDec,
        pid: item.v_id, //关联的视频id
        createTime: item.create_time,
        type: item.label,
        channel: item.v_channel,
        desc: item.describe,
        atype: item.type,
      });

      if (index == 0) {
        markInfo.id = item.id;
        markInfo.startTime = item.start_time;
        markInfo.endTime = item.end_time;
        markInfo.startTimeDec = startTimeDec;
        markInfo.endTimeDec = endTimeDec;
        markInfo.channel = item.v_channel;
        markInfo.createTime = item.create_time;
        markInfo.desc = item.describe;
        markInfo.pid = item.v_id;
        markInfo.type = item.label;
        markInfo.atype = item.type;
      }
    });
    markInfoList.sort((a, b) => {
      return a.startTimeDec - b.startTimeDec;
    });
    videoFileList[index].markInfoList = markInfoList;
  } catch (err) {
    console.log(err);
  }
};
//同时播放
const playSafeTime = () => {
  if (leftPalyBtnName.value == '同时播放') {
    leftPalyBtnName.value = '同时暂停';
    videoFileList.forEach((item, index) => {
      item.player.play();
    });
  } else {
    leftPalyBtnName.value = '同时播放';
    videoFileList.forEach((item, index) => {
      item.player.pause();
    });
  }
};

const getTimeDesc = (time) => {
  return time;
};

//标注
const endMark = async () => {
  if (bottomMarkName.value == '开始标注') {
    if (selectPlayer.videoInfo.playMode == 0) {
      selectPlayer.player.pause();
    } else {
      selectItemGetCurFrame();
    }
    markInfo.startTime = selectPlayer.player.currentTime();
    markInfo.startTimeDec = getTimeDesc(markInfo.startTime);
    markInfo.createTime = dayjs(videoFileList[selectIndex.value].start_time)
      .add(markInfo.startTime, 'second')
      .format('YYYY-MM-DD HH:mm:ss');
    markInfo.channel = videoFileList[selectIndex.value].channel;
    markInfo.endTime = markInfo.startTime;
    markInfo.endTimeDec = '';
    markInfo.desc = '';
    markInfo.type = '';
    markInfo.id = '0';
    markInfo.pid = videoFileList[selectIndex.value].id;
    bottomMarkName.value = '结束标注';
    dialogVisible.value = true;
  } else {
    if (selectPlayer.videoInfo.playMode == 0) {
      selectPlayer.player.pause();
    } else {
      selectItemGetCurFrame();
    }
    bottomMarkName.value = '开始标注';
    markInfo.endTime = selectPlayer.player.currentTime();
    markInfo.endTimeDec = getTimeDesc(markInfo.endTime);
    markInfoList[markInfoList.length - 1].endTime = markInfo.endTime;
    markInfoList[markInfoList.length - 1].endTimeDec = markInfo.endTimeDec;
    //先排序
    markInfoList.sort((a, b) => a.startTime - b.startTime);

    videoFileList[selectIndex.value].markInfoList = markInfoList;

    //保存数据到数据库
    await addMarkItemInfo([
      {
        id: markInfo.id,
        videoInfoId: markInfo.pid,
        startTime: markInfo.startTime,
        endTime: markInfo.endTime,
        label: markInfo.type,
        describe: markInfo.desc,
        channel: markInfo.channel,
        status: 0,
        createTime: markInfo.createTime,
        createUser: systemStore.getUserInfo().name,
      },
    ]);

    ElMessage.success('保存成功');
  }
};

//删除文本标签
const closeContent = async (index) => {
  ElMessageBox.confirm('是否确定删除当前数据?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true,
  })
    .then(async () => {
      await deleteMarkItem(index);
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};

let videoUpdate = {
  id: '0',
  status: '0',
};

const deleteMarkItem = async (index) => {
  // videoUpdate.id = markInfoList[index].id
  // videoUpdate.status = "1"  //删除
  // await deleteMarkInfo(videoUpdate)

  await deleteMark({
    id: markInfoList[index].id,
    status: '1',
    type: markInfoList[index].atype,
  });
  markInfoList.splice(index, 1);
  videoFileList[selectIndex.value].markInfoList = markInfoList;
};

//选择标志点进行播放
const playMark = (index) => {
  selectPlayer.player.currentTime(markInfoList[index].startTime);
  videoFileList[selectIndex.value].player.currentTime(markInfoList[index].startTime);
};
</script>
<style lang="less" scoped>
.operator{
  margin-top:10px;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .leftContent {
    width: 348px;
    min-width: 348px;
    border: solid 1px rgb(148, 148, 148);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100% - 50px);
    .title {
      background: rgb(240, 242, 245);
      font-weight: 500;
      font-size: 16px;
      color: #020f1b;
      font-style: normal;
      display: flex;
      justify-content: flex-start;
      padding-left: 5px;
      align-items: center;
      height: 52px;
    }
    .btn {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    .screenList {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      width: 100%;
      .screenItem {
        width: 100%;
        height: 200px;
        background-color: #020f1b;
        border: solid 2px rgb(255, 189, 91);
        margin-top: 3px;
      }
      .select-btn {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .rightContent {
    border: solid 1px rgb(148, 148, 148);
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 368px);
    height: calc(100% - 50px);
    .title {
      background: rgb(240, 242, 245);
      font-weight: 500;
      font-size: 16px;
      color: #020f1b;
      font-style: normal;
      display: flex;
      justify-content: flex-start;
      padding-left: 5px;
      align-items: center;
      height: 52px;
      width: 100%;
    }
    .screen {
      flex: 1;
      width: 100%;
      background-color: #020f1b;
      border: solid 1px rgb(255, 189, 91);
    }
    .markLine {
      width: 100%;
      overflow: auto;
      margin-top: 10px;
      padding-left: 5px;
      padding-right: 5px;
      height: auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 80px;
      .timeTitle {
        height: 40px;

        font-size: 22px;
        color: #020f1b;
        font-style: normal;
        width: 100%;
        display: flex;
        // flex-direction: column;
        // justify-content: center;
      }
      .timeLine {
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 20px;
        .item {
          height: 100%;
          width: 230px;
          display: flex;
          flex-shrink: 1;
          align-items: center;
          .time {
            height: 30px;
            background: rgb(64, 158, 255);
            border-radius: 4px;
            font-weight: 600;
            font-size: 16px;
            color: #fff;
            font-style: normal;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .line {
            height: 0px;
            flex: 1;
            border: solid rgb(235, 237, 242) 1px;
          }
        }
      }
      .markInfo {
        height: 70px;
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 70px;
          width: 184px;
          .content {
            height: 100%;
            flex: 1;
            font-weight: 500;
            font-size: 16px;
            color: #020f1b;
            font-style: normal;
            align-items: center;
            border-radius: 0%;
            border: solid 1px rgb(134, 134, 134);
            border-right: none;
          }
          .icon {
            height: 70px;
            width: 26px;
            border: solid 1px rgb(134, 134, 134);
            border-left: none;
            .iconfont {
              border: rgb(134, 134, 134) 1px solid;
              border-radius: 50%;
              font-size: 12px;
              color: #101010;
              text-align: center;
              display: flex;
              position: relative;
              justify-content: center;
              cursor: pointer;
              height: 25px;
              width: 25px;
              align-items: center;
              top: -10px;
              right: -10px;
              background: #fb7373;
              color: #fff;
              &:hover {
                background: #fb7373;
                color: #fff;
              }
            }
            .icon-close {
              &:hover {
                background: #fb7373;
                color: #fff;
              }
            }
          }
          .icon-zw {
            height: 70px;
            width: 26px;
          }
        }
      }
    }
    .btn {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
  }
}
.dialogContent {
  background-color: rgb(240, 242, 245);
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    flex-direction: row;
    height: 58px;
    justify-content: flex-start;
    align-items: center;
    .item {
      font-weight: 500;
      font-size: 16px;
      color: #020f1b;
      font-style: normal;
      margin-left: 10px;
    }
    .item2 {
      font-weight: 500;
      font-size: 16px;
      color: #020f1b;
      font-style: normal;
      margin-left: 10px;
      padding: 0 3px;
    }
  }
  .form {
    .type {
      text-align: center;
    }
    .desc {
      min-height: 150px;
      max-height: 210px;
    }
  }
}
.video-js {
  width: 100%; /* 确保视频内容宽度 */
  height: 100%;
}
/* 隐藏暂停按钮 */
:deep(.vjs-big-play-button) {
  display: none;
}
:deep(.el-input__wrapper) {
  margin-bottom: 10px;
}

.mark-info {
  display: flex;
  gap: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 70px;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.mark-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.content {
  cursor: pointer;
  width: 160px;
  transition: all 0.3s ease;
}

.content:hover {
  transform: scale(1.05);
}

.type-label {
  font-size: 14px;
  color: #333;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
}

.type-label:hover {
  background-color: #d0d0d0;
}

.icon {
  cursor: pointer;
}

.icon .iconfont {
  font-size: 18px;
  color: #999;
  transition: all 0.3s ease;
}

.icon .iconfont:hover {
  color: #666;
}
</style>
